<template>
    <el-form ref="plantFormRef" :model="plantForm" label-width="80px">
        <div class="add-plant-title">修改作品</div>
        <el-form-item label="作品名" required>
            <el-input v-model="plantForm.plantName" placeholder="请输入作品名"></el-input>
        </el-form-item>
        <el-form-item label="植物学名">
            <el-input v-model="plantForm.plantSpecific" placeholder="请输入植物学名"></el-input>
        </el-form-item>
        <el-form-item label="拉丁学名">
            <el-input v-model="plantForm.latinName" placeholder="请输入植物拉丁学名"></el-input>
        </el-form-item>
        <el-form-item label="种群" required>
            <el-select @change="categoryChange" v-model="plantForm.categoryId" class="m-2" placeholder="请选择种群">
                <el-option v-for="item in categoryOptions" :label="item.categoryName" :value="item.categoryId" />
            </el-select>
        </el-form-item>
        <el-form-item label="科属">
            <el-cascader v-model="familyIdArray.familyId" :options="familyList" :props="props1" placeholder="请选择科属"
                clearable />
        </el-form-item>
        <el-form-item label="植物描述">
            <el-input v-model="plantForm.plantDescription" placeholder="请输入植物描述" type="textarea"></el-input>
        </el-form-item>
        <el-form-item class="add-plant-button">
            <el-button type="primary" @click="updatePlant()">确认修改</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { useCategoryListApi, useFamilyTreeApi } from '@/api/plant/category'
import { useUpdatePlantApi} from '@/api/plant/plant'
import { useRequest } from 'vue-request';
import { ElMessage } from 'element-plus'


const props = defineProps(['plantInfo'])

const router = useRouter()
const route = useRoute()
const plantForm = reactive({
    plantId: '',
    plantName: '',
    plantSpecific: '',
    latinName: '',
    categoryId: '',
    familyId: '',
    plantDescription: '',
    userId: '',
    genusId: '',
});
const pageParam = reactive({
    currentPage: 1,
    pageSize: 1000
})
const familyList = reactive([])
const familyIdArray = reactive<{
    familyId: any
}>({
    familyId: [],
})
const props1 = {
    expandTrigger: 'hover' as const,
    checkStrictly: true,
    value: 'familyId',
    label: 'familyName',
    children: 'child'
}

onMounted(() => {
    Object.assign(plantForm, props.plantInfo)
    categoryChange(plantForm.categoryId)
    familyIdArray.familyId.push(plantForm.familyId)
    familyIdArray.familyId.push(plantForm.genusId)
})


const { data } = useRequest(useCategoryListApi(pageParam))
const categoryOptions = computed(() => {
    return data.value?.data || []
})
const categoryChange = async (val: any) => {
    familyList.length = 0
    const { data } = await useFamilyTreeApi(val)
    Object.assign(familyList, data)
}

const updatePlant = async () => {
    plantForm.familyId = familyIdArray.familyId[0]
    if (familyIdArray.familyId[1]) {
        plantForm.genusId = familyIdArray.familyId[1]
    }
    await useUpdatePlantApi(plantForm)
        .then((res) => {
            ElMessage({
                message: '修改成功',
                type: 'success'
            })
            refresh()
        })
}


function refresh() {
    // 刷新当前路由
    const { fullPath } = route
    router.replace({
        path: '/redirect' + fullPath
    })
}


</script>

<style lang="scss" scoped>
.add-plant-title {
    display: flex;
    justify-content: center;
    margin-bottom: 35px;
    font-size: 24px;
    color: #444;
    letter-spacing: 4px;
}

.add-plant-button {
    :deep(.el-button--primary) {
        margin-top: 10px;
        width: 100%;
        height: 45px;
        font-size: 18px;
        letter-spacing: 8px;
    }
}

.picture-uploader .picture {
    width: 178px;
    height: 178px;
    display: block;
}

.picture-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.picture-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.picture-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>